﻿@{
    ViewData["Title"] = "角色管理";
    Layout = "~/Views/Shared/_LayoutNone.cshtml";
}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form-item" style="margin-bottom: 5px;">
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-sm layuiadmin-btn-list" data-type="add"><i class="layui-icon layui-icon-add-1"></i>新增角色</button>
                </div>
            </div>
            <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
            <blockquote class="layui-elem-quote" style="margin: 10px 0; padding: 10px">
                <div>
                    <strong>角色说明：</strong>
                    支持配置任意角色，每个角色权限可控制后台每个菜单页面。
                </div>
            </blockquote>

            <script type="text/html" id="roleTpl">
                <a lay-href="/users/?role_id={{d.role_id}}" class="layui-table-link">{{ d.user_num }}</a>
            </script>
            <script type="text/html" id="table-content-list">
                <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script src="~/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/'
    }).extend({
        index: '/lib/index'
    }).use(['index', 'table', 'laydate', 'util'], function () {
        var table = layui.table
            , admin = layui.admin
            , form = layui.form
            , laydate = layui.laydate
            , util = layui.util;

        // 加载表格数据
        table.render({
            elem: "#LAY-app-content-list",
            url: "/userroles/list",
            toolbar: false,
            cols: [
                [
                    {
                        type: "numbers",
                        title: "序号",
                        width: 80,
                    },
                    {
                        field: "role_name",
                        title: "角色名称",
                        width: 150
                    },
                    {
                        field: "role_desc",
                        title: "拥有权限",
                        width: 150
                    },
                    {
                        field: "role_remark",
                        title: "描述",
                        minWidth: 300
                    },
                    {
                        field: "user_num",
                        title: "授权人数",
                        align: "center",
                        templet: "#roleTpl",
                        width: 150
                    },
                    {
                        title: "操作",
                        width: 200,
                        align: "center",
                        fixed: "right",
                        toolbar: "#table-content-list"
                    }]
            ],
            page: !0,
            limit: 10,
            limits: [10, 20, 50, 200, 500]
        }),

            // 右侧操作事件
            table.on("tool(LAY-app-content-list)", function (t) {
                var role_id = t.data.role_id;
                if ("del" === t.event) {
                    layer.confirm("确定删除此角色？", function (e) {
                        admin.req({
                            headers: {
                                'RequestVerificationToken': csrfToken
                            },
                            method: 'POST',
                            url: '/userroles/delete/' + role_id
                            , done: function (res) {

                                t.del();
                                layer.close(e);
                            }
                        });

                    });
                }
                else if ("edit" === t.event) {
                    layer.open({
                        type: 2,
                        title: "编辑角色",
                        content: "/userroles/edit?id=" + role_id,
                        maxmin: !0,
                        area: ["550px", "350px"],
                        btn: ["确定", "取消"],
                        yes: function (e, i) {
                            a = i.find("iframe").contents().find("#layuiadmin-app-form-edit");
                            a.trigger("click");
                        }
                    })
                }
            }),

            // 监听搜索
            form.on('submit(LAY-app-contlist-search)', function (data) {
                var field = data.field;
                table.reload('LAY-app-content-list', {
                    where: field,
                    page: {
                        curr: 1
                    },
                });
            });

        var $ = layui.$, active = {
            add: function () {
                layer.open({
                    type: 2
                    , title: '添加角色'
                    , content: '/userroles/create'
                    , maxmin: true
                    , area: ['550px', '350px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                        submit.click();
                    }
                });
            },
            refresh: function () {
                table.reload('LAY-app-content-list');
            }
        };

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
